<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信-自定义事件-子组件给父组件传递数据</title>
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="case13-demo10">
    <input type="text" v-model="name">
    <my-hello v-bind:name.sync="name"></my-hello>
</div>
<template id="case13-demo10-tem">
    <div>
        <h3>子组件:{{name}}</h3>
        <button v-on:click="change">修改数据</button>
    </div>
</template>
<script type="text/javascript">
    var case13Demo10=new Vue({//父组件
        el:"#case13-demo10",
        data:{
            name:"tom"
        },
        components:{
            'my-hello':{//子组件
                props:['name'],
                template:'#case13-demo10-tem',
                data:function () {
                    return{
                        username: this.name//方式1：将数据存入另一个变量中在操作
                }
                },
                methods:{
                    change(){
                        console.log("123")
                        this.$emit('update:name','clice')
                    }
                }
            }
        }
    })
</script>
</body>
</html>